<template>
  <div class="Leftmenu">
    <a-layout id="components-layout-demo-custom-trigger">
      <a-layout-sider
        :trigger="null"
        collapsible
        v-model="collapsed"
        width="14%"
        :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }"
      >
        <div class="logo">总后台管理系统</div>
        <a-menu theme="dark" mode="inline" :defaultSelectedKeys="['1']">
          <a-menu-item key="1">
            <a-icon type="dashboard" />
            <span>
              <router-link to="/home">首页</router-link>
            </span>
          </a-menu-item>
          <a-sub-menu key="sub1">
            <span slot="title">
              <a-icon type="table" />
              <span>订单管理</span>
            </span>
            <a-menu-item key="2">
              <router-link to="/home/orderadmin/sellorder">销售订单</router-link>
            </a-menu-item>
            <a-menu-item key="3">
              <router-link to="/home/orderadmin/aftersaleindent">售后订单</router-link>
            </a-menu-item>
            <a-menu-item key="4">
              <router-link to="/home/orderadmin/abnormalorders">异常订单</router-link>
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <span slot="title">
              <a-icon type="table" />
              <span>商品管理</span>
            </span>
            <a-menu-item key="6">
              <router-link to="/home/goodsadmin/allgoods">总商品库</router-link>
            </a-menu-item>
            <a-menu-item key="7">
              <router-link to="/home/goodsadmin/goodsclassify">商品分类</router-link>
            </a-menu-item>
            <a-menu-item key="8">
              <router-link to="/home/goodsadmin/arithdiscern">算法识别码</router-link>
            </a-menu-item>
          </a-sub-menu>
          <a-menu-item key="9">
            <a-icon type="table" />
            <span>
              <router-link to="/home/stockinquiry">库存查询</router-link>
            </span>
          </a-menu-item>
          <a-menu-item key="10">
            <a-icon type="table" />
            <span>
              <router-link to="/home/useradmin">用户管理</router-link>
            </span>
          </a-menu-item>
          <a-menu-item key="11">
            <a-icon type="table" />
            <span>
              <router-link to="/home/agentadmin">代理商管理</router-link>
            </span>
          </a-menu-item>
          <a-sub-menu key="sub3">
            <span slot="title">
              <a-icon type="table" />
              <span>设备管理</span>
            </span>
            <a-menu-item key="12">
              <router-link to="/home/facilityadmin/facilityadminson">设备管理</router-link>
            </a-menu-item>
            <a-menu-item key="13">
              <router-link to="/home/facilityadmin/repairsfacility">报修设备</router-link>
            </a-menu-item>
            <a-menu-item key="14">
              <router-link to="/home/facilityadmin/keepalive">保活信息</router-link>
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub4">
            <span slot="title">
              <a-icon type="table" />
              <span>数据分析</span>
            </span>
            <a-menu-item key="15">代理商销量</a-menu-item>
            <a-menu-item key="16">品类销量</a-menu-item>
            <a-menu-item key="17">用户分析</a-menu-item>
          </a-sub-menu>
          <!-- <a-menu-item key="18">
            <a-icon type="table"/>
            <span>
              <router-link to="/">促销活动</router-link>
            </span>
          </a-menu-item>-->
          <a-sub-menu key="sub5">
            <span slot="title">
              <a-icon type="table" />
              <span>财务管理</span>
            </span>
            <a-menu-item key="19">
              <router-link to="/home/financeadmin/residualadmin">余额管理</router-link>
            </a-menu-item>
            <a-menu-item key="20">
              <router-link to="/home/financeadmin/cashmanagement">提现管理</router-link>
            </a-menu-item>
            <a-menu-item key="21">
              <router-link to="/home/financeadmin/billadmin">账单管理</router-link>
            </a-menu-item>
          </a-sub-menu>
          <a-menu-item key="22">
            <a-icon type="table" />
            <span>
              <router-link to="/home/containerlog">货柜日志</router-link>
            </span>
          </a-menu-item>
          <a-sub-menu key="sub6">
            <span slot="title">
              <a-icon type="table" />
              <span>权限管理</span>
            </span>
            <a-menu-item key="23">
              <router-link to="/home/accessadmin/peopleadmin">人员管理</router-link>
            </a-menu-item>
            <a-menu-item key="24">
              <router-link to="/home/accessadmin/roleadmin">角色管理</router-link>
            </a-menu-item>
          </a-sub-menu>
          <a-menu-item key="25">
            <a-icon type="table" />
            <span>用户反馈</span>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout :style="{ marginLeft: '14%' }">
        <main :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
          <a-layout-header>
            <a-row :gutter="0">
              <a-col :span="5">
                <a-icon
                  class="trigger"
                  :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                  @click="()=> collapsed = !collapsed"
                />
                <a-icon type="appstore" style="font-size:20px;" />
              </a-col>
              <a-col :span="15" style="text-align:right;padding-right:2%">
                <a-icon type="search" style="font-size:20px;padding:0 24px" />
                <a-icon type="question-circle" style="font-size:20px;" />
                <a-icon type="bell" style="font-size:20px;padding:0 24px" />
                <a-dropdown class="logout" :trigger="['click']">
                  <a class="ant-dropdown-link" href="#">
                    <a-avatar :size="25" icon="user" :src="this.$store.state.photoImg" />
                    <span style="padding:0 8px">{{this.$store.state.nickname}}</span>
                    <a-icon type="down" />
                  </a>
                  <a-menu slot="overlay" @visibleChange="visibleChange">
                    <a-menu-item key="1" @click="logout">
                      <router-link to="/login">
                        <a href="javascript:;" class="logout">
                          <a-icon type="logout" />
                          <span>退出登录</span>
                        </a>
                      </router-link>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </a-col>
            </a-row>
          </a-layout-header>
          <a-layout class="navigation">
            <a-breadcrumb separator="/" :routes="routes"></a-breadcrumb>
          </a-layout>
        </main>
        <br />
        <a-layout style="padding: 115px 24px 50px 24px">
          <router-view></router-view>
        </a-layout>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
export default {
  name: "Leftmenu",
  data() {
    const { lang } = this.$route.params;
    return {
      collapsed: false,
      routes: [
        {
          path: "home",
          breadcrumbName: "首页"
        }
      ],
      visible: false
    };
  },
  methods: {
    visibleChange(visible) {
      console.log(visible);
    },
    // 退出登录
    logout() {
      this.axios
        .post(this.baseUrl + "/backend/logout", {
          loginToken: this.$store.state.loginToken
        })
        .then(response => {
          console.log(response);
          this.$store.state.loginToken = "";
        });
    }
  },
  watch: {
    $route: function(to, from) {
      // console.log("---------");
      // console.log(from);
      // console.log(to);
      if (to.path == "/home") {
        this.routes.splice(1, 3);
      }
      if (to.path == "/home/orderadmin/sellorder") {
        this.routes.splice(
          1,
          3,
          { path: "orderadmin", breadcrumbName: "订单管理" },
          { path: "sellorder", breadcrumbName: "销售订单" }
        );
      }
      if (to.path == "/home/orderadmin/aftersaleindent") {
        this.routes.splice(
          1,
          3,
          { path: "orderadmin", breadcrumbName: "订单管理" },
          { path: "aftersaleindent", breadcrumbName: "售后订单" }
        );
      }
      if (to.path == "/home/orderadmin/abnormalorders") {
        this.routes.splice(
          1,
          3,
          { path: "orderadmin", breadcrumbName: "订单管理" },
          { path: "abnormalorders", breadcrumbName: "异常订单" }
        );
      }
      if (to.path == "/home/orderadmin/sellorder/selldetails") {
        this.routes.splice(
          1,
          3,
          { path: "orderadmin", breadcrumbName: "订单管理" },
          { path: "sellorder", breadcrumbName: "销售订单" },
          { path: "selldetails", breadcrumbName: "销售订单详情" }
        );
      }
      if (to.path == "/home/orderadmin/aftersaleindent/aftersaledetails") {
        this.routes.splice(
          1,
          3,
          { path: "orderadmin", breadcrumbName: "订单管理" },
          { path: "aftersaleindent", breadcrumbName: "售后订单" },
          { path: "aftersaledetails", breadcrumbName: "售后订单详情" }
        );
      }
      if (to.path == "/home/orderadmin/abnormalorders/abnormaldetails") {
        this.routes.splice(
          1,
          3,
          { path: "orderadmin", breadcrumbName: "订单管理" },
          { path: "abnormalorders", breadcrumbName: "异常订单" },
          { path: "abnormaldetails", breadcrumbName: "异常订单详情" }
        );
      }
      if (to.path == "/home/goodsadmin/allgoods") {
        this.routes.splice(
          1,
          3,
          { path: "goodsadmin", breadcrumbName: "商品管理" },
          { path: "allgoods", breadcrumbName: "总商品库" }
        );
      }
      if (to.path == "/home/goodsadmin/allgoods/goodsnew") {
        this.routes.splice(
          1,
          3,
          { path: "goodsadmin", breadcrumbName: "商品管理" },
          { path: "allgoods", breadcrumbName: "总商品库" },
          { path: "goodsnew", breadcrumbName: "新建商品" }
        );
      }
      if (to.path == "/home/goodsadmin/allgoods/allGoodsedit") {
        this.routes.splice(
          1,
          3,
          { path: "goodsadmin", breadcrumbName: "商品管理" },
          { path: "allgoods", breadcrumbName: "总商品库" },
          { path: "allgoodsedit", breadcrumbName: "编辑商品" }
        );
      }
      if (to.path == "/home/goodsadmin/arithdiscern") {
        this.routes.splice(
          1,
          3,
          { path: "goodsadmin", breadcrumbName: "商品管理" },
          { path: "arithdiscern", breadcrumbName: "算法识别码" }
        );
      }
      if (to.path == "/home/goodsadmin/goodsclassify") {
        this.routes.splice(
          1,
          3,
          { path: "goodsadmin", breadcrumbName: "商品管理" },
          { path: "goodsclassify", breadcrumbName: "商品分类" }
        );
      }
      if (to.path == "/home/goodsadmin/goodsclassify/goodsnewclassify") {
        this.routes.splice(
          1,
          3,
          { path: "goodsadmin", breadcrumbName: "商品管理" },
          { path: "goodsclassify", breadcrumbName: "商品分类" },
          { path: "goodsnewclassify", breadcrumbName: "新建商品分类" }
        );
      }
      if (to.path == "/home/stockinquiry") {
        this.routes.splice(1, 3, {
          path: "stockinquiry",
          breadcrumbName: "库存查询"
        });
      }
      if (to.path == "/home/useradmin") {
        this.routes.splice(1, 3, {
          path: "useradmin",
          breadcrumbName: "用户管理"
        });
      }
      if (to.path == "/home/agentadmin") {
        this.routes.splice(1, 3, {
          path: "agentadmin",
          breadcrumbName: "代理商管理"
        });
      }
      if (to.path == "/home/facilityadmin/facilityadminson") {
        this.routes.splice(
          1,
          3,
          { path: "facilityadmin", breadcrumbName: "设备管理" },
          { path: "facilityadminson", breadcrumbName: "设备管理" }
        );
      }
      if (to.path == "/home/facilityadmin/repairsfacility") {
        this.routes.splice(
          1,
          3,
          { path: "facilityadmin", breadcrumbName: "设备管理" },
          { path: "repairsfacility", breadcrumbName: "报修设备" }
        );
      }
      if (to.path == "/home/facilityadmin/keepalive") {
        this.routes.splice(
          1,
          3,
          { path: "facilityadmin", breadcrumbName: "设备管理" },
          { path: "keepalive", breadcrumbName: "保活信息" }
        );
      }
      if (to.path == "/home/containerlog") {
        this.routes.splice(1, 3, {
          path: "containerlog",
          breadcrumbName: "货柜日志"
        });
      }

      if (to.path == "/home/financeadmin/residualadmin") {
        this.routes.splice(
          1,
          3,
          { path: "financeadmin", breadcrumbName: "财务管理" },
          { path: "residualadmin", breadcrumbName: "余额管理" }
        );
      }
      if (to.path == "/home/financeadmin/Cashmanagement") {
        this.routes.splice(
          1,
          3,
          { path: "financeadmin", breadcrumbName: "财务管理" },
          { path: "Cashmanagement", breadcrumbName: "提现管理" }
        );
      }
      if (to.path == "/home/financeadmin/billadmin") {
        this.routes.splice(
          1,
          3,
          { path: "financeadmin", breadcrumbName: "财务管理" },
          { path: "billadmin", breadcrumbName: "账单管理" }
        );
      }
      if (to.path == "/home/accessadmin/peopleadmin") {
        this.routes.splice(
          1,
          3,
          { path: "accessadmin", breadcrumbName: "权限管理" },
          { path: "peopleadmin", breadcrumbName: "人员管理" }
        );
      }
      if (to.path == "/home/accessadmin/roleadmin") {
        this.routes.splice(
          1,
          3,
          { path: "accessadmin", breadcrumbName: "权限管理" },
          { path: "roleadmin", breadcrumbName: "角色管理" }
        );
      }
      if (to.path == "/home/accessadmin/roleadmin/roleadd") {
        this.routes.splice(
          1,
          3,
          { path: "accessadmin", breadcrumbName: "权限管理" },
          { path: "roleadmin", breadcrumbName: "角色管理" },
          { path: "roleadd", breadcrumbName: "新增角色" }
        );
      }
      if (to.path == "/home/accessadmin/roleadmin/roleedit") {
        this.routes.splice(
          1,
          3,
          { path: "accessadmin", breadcrumbName: "权限管理" },
          { path: "roleadmin", breadcrumbName: "角色管理" },
          { path: "roleedit", breadcrumbName: "编辑角色" }
        );
      }
    }
  },
  mounted: function() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.Leftmenu {
  height: 100%;
}
.ant-layout-header {
  background: #fff;
  padding: 0;
  border-bottom: 1px solid rgb(242, 242, 242);
}
.navigation {
  width: 100%;
}
.ant-breadcrumb {
  background: white;
  height: 50px;
  line-height: 50px;
  padding-left: 30px;
}
.ant-breadcrumb-link a {
  color: rgba(0, 0, 0, 0.65);
}
#components-layout-demo-custom-trigger {
  height: 100%;
}
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 65px;
  line-height: 65px;
  width: 100%;
  color: white;
  font-size: 1.1rem;
  text-align: center;
  background: rgb(0, 40, 77);
}
a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
}
.logout {
  color: black;
}
</style>
